<template>
    <!--输入自动完成组件-->
    <div>
        <el-row style="display: flex;align-items: center;padding: 10px">
            <el-col :span="6" class="label">
                <label>search:</label>
            </el-col>
            <el-col :span="18">
                <el-autocomplete
                        v-model="eValue"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容"
                        @select="handleSelect"
                        @change="changeVal"
                ></el-autocomplete>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "e-autocomplete",
        props:{
            properties:{
                type:Object
            },
            ui:{
                type:Object
            },
            keys:{
                type:String
            }
        },
        data() {
            return {
                restaurants: [],
                eValue: '',
                timeout: null
            };
        },
        mounted(){
            let that = this;
            this.$bus.$on('activeNode',function (e) {   //监听选中节点改变时当前表单初始值改变
                that.eValue = typeof(e[that.keys])!="undefined"?e[that.keys]:'';
            })
        },
        methods: {
            loadAll() {
                return [
                    { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },
                    { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },
                    { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },
                    { "value": "泷千家(天山西路店)", "address": "天山西路438号" },
                    { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },
                    { "value": "贡茶", "address": "上海市长宁区金钟路633号" },
                    { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },
                    { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },
                    { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" }
                ];
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            changeVal(val){  //当前表单输入值改变通知父组件更新画布节点数据
                console.log(val)
                this.$emit('changeAttr',{[this.keys]:val});
            },
            handleSelect(item) {
                this.$emit('changeAttr',{[this.keys]:item});
                console.log(item);
            }
        },
        mounted() {
            this.restaurants = this.loadAll();
        }
    }
</script>

<style scoped>
    .label{
        text-align: right;
        padding-right: 10px;
    }
</style>